<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>background</title>
<style>
.test{ width:300px; height:225px; border:#FC6 15px dotted; margin:5px; padding:20px;background:url(/test/liangdong/src/images/testbg.jpg) no-repeat; float:left;}
.test1{ width:200px; height:200px;}
.box{ zoom:1; margin-bottom:10px; overflow:auto;}
</style>
</head>

<body>
<div>
    background-origin: padding-box|border-box|content-box; <br/>
    <a href="http://www.w3schools.com/css3/css3_pr_background-origin.asp">说明</a>：背景相对于什么进行定位。
</div>
<div class="box">
    <div class="test" style="background-origin:padding-box;">div 300 x 225<br/>background-origin:padding-box;(default)</div>
    <div class="test" style="background-origin:border-box;">div 300 x 225<br/>background-origin:border-box;</div>
    <div class="test" style="background-origin:content-box;">div 300 x 225<br/>background-origin:content-box;</div>
</div>
<div>
    background-size: length|percentage|cover|contain;<br/>
    <a href="http://www.w3schools.com/css3/css3_pr_background-size.asp">说明</a>：背景大小。
</div>
<div class="box">
    <div class="test" style="background-size:200px;">div 300 x 225<br/>background-size:200px;</div>
    <div class="test" style="background-size:150px 200px;">div 300 x 225<br/>background-size:150px 200px;</div>
    <div class="test" style="background-size:50%;">div 300 x 225<br/>background-size:50%;</div>
    <div class="test" style="background-size:50% 90%;">div 300 x 225<br/>background-size:50%;</div>
    <div class="test" style="background-size:cover;">div 300 x 225<br/>background-size:cover;</div>
    <div class="test" style="background-size:contain; background-position:center; width:225px;">div 225 x 225<br/>background-size:contain;background-position:center;</div>
</div>
<div>
    background-clip: padding-box|border-box|content-box;<br/>
    <a href="http://www.w3schools.com/css3/css3_pr_background-clip.asp">说明</a>：背景剪裁。
</div>
<div class="box">
    <div class="test test1" style="background-clip:border-box;">div 200 x 200<br/>background-clip:border-box;(default)</div>
    <div class="test test1" style="background-clip:padding-box;">div 200 x 200<br/>background-clip:padding-box;</div>
    <div class="test test1" style="background-clip:content-box;">div 200 x 200<br/>background-clip:content-box;</div>
</div>
</body>
</html>
